<template>
	<view class="content">
		<view class="content_list">
			<view class="name">我的头像</view>
			<view class="right">
				<view class="userImg">
					<button open-type="chooseAvatar" @chooseavatar="getUserImg"></button>
					<uv-avatar size="40" :src="setData.userheaderimageurl"></uv-avatar>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">真实姓名</view>
			<view class="right" @click="showSet('真实姓名','lxr')">
				<view class="text">{{setData.lxr}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">手机号码</view>
			<view class="right" @click="showSet('手机号码','shouji')">
				<view class="text">{{setData.shouji}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">常驻城市</view>
			<view class="right" @click="showSet('常驻城市','ResidentCity')">
				<view class="text">{{setData.ResidentCity}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">公司单位</view>
			<view class="right" @click="showSet('公司单位','company')">
				<view class="text">{{setData.company}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">部门职务</view>
			<view class="right" @click="showSet('部门职务','zhiwei')">
				<view class="text">{{setData.zhiwei}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">业务专长</view>
			<view class="right" @click="showSet('业务专长','SpecializedSkill')">
				<view class="text">{{setData.SpecializedSkill}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">邮政</view>
			<view class="right" @click="showSet('邮政','email')">
				<view class="text">{{setData.email}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">微信号</view>
			<view class="right" @click="showSet('微信号','weixin')">
				<view class="text">{{setData.weixin}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">QQ</view>
			<view class="right" @click="showSet('QQ','qqhaoma')">
				<view class="text">{{setData.qqhaoma}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">生日</view>
			<view class="right" @click="showSet('生日','chushengriqi')">
				<view class="text">{{setData.chushengriqi}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_title">其他信息</view>
		<view class="content_list">
			<view class="name">性别</view>
			<view class="right" @click="showSex">
				<view class="text">{{setData.xingbie=='1'?'先生':'女士'}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">个人介绍</view>
			<view class="right" @click="showSet('个人介绍','gerenjieshao')">
				<view class="text">{{setData.gerenjieshao}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">地址</view>
			<view class="right" @click="showSet('地址','dizhi')">
				<view class="text">{{setData.dizhi}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list">
			<view class="name">名片公开</view>
			<view class="right" @click="showMp">
				<view class="text">{{setData.txlcardhide=='1'?'交换名片可见':'对群友可见'}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<view class="content_list" v-for="(v,k) in extrafield" :key="k" >
			<view class="name">{{v.caption}}</view>
			<view class="right" @click="showSet(v.caption,v.name)">
				<view class="text">{{setData[v.name]}}</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		
		<view class="content_tj" v-if="setShow">
			<view class="bj" @click="setShow=false"></view>
			<view class="box">
				<view class="title">
					{{setName}}
					<view class="icon" @click="setShow=false">
						<uv-icon name="close" size="22"></uv-icon>
					</view>
				</view>
				<view class="input">
					<textarea v-model="setText" :placeholder="'请输入'+setName"></textarea>
				</view>
				<view class="button" @click="setInfo">完成</view>
			</view>
		</view>
		<uv-picker ref="setSex" :columns="sex" @confirm="isSex"></uv-picker>
		<uv-picker ref="setMp" :columns="mp" @confirm="isMp"></uv-picker>
	</view>
</template>

<script setup>
	import card from '@/components/card/card.vue'
	import {
		ref,defineProps
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link,getTuiGuang,uploadFilePromise
	} from '@/utils/utils.js'
	onLoad((open)=>{
		getUserinfo()
		if(open.txlid){
			txlid.value = open.txlid
			getTxl()
		}
	})
	const txlid = ref('')
	const getUserImg = async(e)=>{
		const result = await uploadFilePromise(e.detail.avatarUrl)
		setData.value.headerimgunikey = result.columns[0].imgunikey
		setData.value.userheaderimageurl = result.columns[0].imgurl
		const res = await homeApi.publicPost({headerimgunikey:setData.value.headerimgunikey},'txlmodifyheaderimg')
	}
	const setShow = ref(false)
	const setText = ref('')
	const setName = ref('姓名')
	const setValue = ref('')
	const showSet = (name,value)=>{
		setName.value = name
		setValue.value = value
		setText.value = setData.value[value]
		setShow.value = true
	}
	
	// 选择性别
	const setSex = ref(null)
	const sex = [['女士','先生']]
	const showSex = ()=>{
		setSex.value.open()
	}
	const isSex = (e)=>{
		let sex = 1
		if(e.indexs[0]=='0'){
			sex = 2
		}else{
			sex = 1
		}
		setValue.value = 'xingbie'
		setText.value = sex
		setInfo()
		
		
	}
	// 选择名片
	const setMp = ref(null)
	const mp = [['对群友可见','交换名片可见']]
	const showMp = ()=>{
		setMp.value.open()
	}
	const isMp = (e)=>{
		let mp = e.indexs[0]
		setValue.value = 'txlcardhide'
		setText.value = mp
		setInfo()
	}
	
	const setData = ref({
		headerimgunikey:'',
		userheaderimageurl:'',
		lxr:'',
		shouji:'',
		ResidentCity:'',
		company:'',
		zhiwei:'',
		SpecializedSkill:'',
		email:'',
		weixin:'',
		qqhaoma:'',
		chushengriqi:'',
		xingbie:'',
		gerenjieshao:'',
		dizhi:'',
		txlcardhide:'',
	})
	const getUserinfo = async()=>{
		let res = await homeApi.publicGet({do:'userinfo'})
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'userinfo') {
				setData.value.userheaderimageurl = res.columns[i].userheaderimageurl?res.columns[i].userheaderimageurl:''
				setData.value.lxr = res.columns[i].lxr?res.columns[i].lxr:''
				setData.value.shouji = res.columns[i].shouji?res.columns[i].shouji:''
				setData.value.ResidentCity = res.columns[i].ResidentCity?res.columns[i].ResidentCity:''
				setData.value.company = res.columns[i].company?res.columns[i].company:''
				setData.value.zhiwei = res.columns[i].zhiwei?res.columns[i].zhiwei:''
				setData.value.SpecializedSkill = res.columns[i].SpecializedSkill?res.columns[i].SpecializedSkill:''
				setData.value.email = res.columns[i].email?res.columns[i].email:''
				setData.value.weixin = res.columns[i].weixin?res.columns[i].weixin:''
				setData.value.qqhaoma = res.columns[i].qqhaoma?res.columns[i].qqhaoma:''
				setData.value.chushengriqi = res.columns[i].chushengriqi?res.columns[i].chushengriqi:''
				setData.value.xingbie = res.columns[i].xingbie?res.columns[i].xingbie:''
				setData.value.gerenjieshao = res.columns[i].gerenjieshao?res.columns[i].gerenjieshao:''
				setData.value.dizhi = res.columns[i].dizhi?res.columns[i].dizhi:''
				setData.value.txlcardhide = res.columns[i].txlcardhide?res.columns[i].txlcardhide:''
			}
		}
	}
	const extrafield = ref([])
	const getTxl = async()=>{
		let data = {
			do: 'txldetail',
			txlid: txlid.value,
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txldetail') {
				extrafield.value = res.columns[i].extrafield?res.columns[i].extrafield:[]
			}
		}
		for(let i = 0;i<extrafield.value.length;i++){
			setData.value[extrafield.value[i].name] = extrafield.value[i].value
		}
	}
	// 修改个人信息
	
	const setInfo = async()=>{
		let data = {
			txlid:txlid.value,
			fieldname:setValue.value,
			fieldval:setText.value
		}
		let res = await homeApi.publicPost(data,'txlmodifyinfo')
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlmodifyinfo') {
				if(res.columns[i].statuscode=='200'){
					setData.value[setValue.value] = setText.value
					setShow.value = false
				}else{
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		background: #f5f6fa;
		&_list{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-bottom: 1px solid #f5f6fa;
			.name{
				font-size: 32rpx;
				width: 150rpx;
			}
			.right{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.right .userImg {
				position: relative;
				margin-right: 10rpx;
				.mrImg {
					width: 80rpx;
					height: 80rpx;
				}
				button {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					opacity: 0;
					left: 0;
					top: 0;
					z-index: 99;
				}
			}
			.right .text{
				margin-right: 10rpx;
				font-size: 32rpx;
				color: #999;
			}
		}
		&_title{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 30rpx;
			color: #555;
		}
		&_tj{
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 999;
			left: 0;
			top: 0;
			.bj{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, .2);
			}
			.box{
				position: absolute;
				bottom: 0;
				left: 0;
				background: #fff;
				width: 100%;
				padding-bottom: 30rpx;
				.title{
					width: 100%;
					height: 100rpx;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-bottom: 1px solid #ddd;
					.icon{
						position: absolute;
						right: 30rpx;
					}
				}
				.input{
					width: calc(100% - 60rpx);
					padding: 30rpx;
					textarea{
						width: calc(100% - 40rpx);
						height: 200rpx;
						padding: 20rpx;
						background: #f5f6fa;
						border-radius: 8px;
						font-size: 28rpx;
					}
				}
				.button{
					width: calc(100% - 60rpx);
					margin: 0 auto;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8px;
					font-size: 32rpx;
					color: #fff;
					background: #e94f06;
				}
			}
		}
	}
</style>